Si definisce in gergo Wizard una sequenza paginata di moduli (form) che consente all'utente di inserire le informazioni a gruppi correlati, di spostarsi avanti e indietro nella sequenza per rivedere le informazioni inserite, infine di inviare i dati complessivamente forniti.
Implementazione
L'approccio base alla creazione di un Wizard consiste nel gestire in ogni pagina tutti i campi costituenti il Wizard stesso. In particolare:
- ciascuna pagina deve conservare tutti i campi del Wizard, ponendo in campi hidden della form i valori che non sono da mostrare nella pagina corrente, e in campi standard i valori modificabili;
- come conseguenza, al submit della form, la pagina corrente passerā alla successiva (o precedente) tutti i campi del Wizard, essendo questi stati posti in campi standard o hidden della form stessa.
Su questa base si possono costruire sistemi pių sofisticati fino ad arrivare a generare dinamicamente le pagine del Wizard sulla base di definizioni magari contenute in documenti XML. Questa strada č consigliabile a chi debba generare un Wizard estremamente esteso, oppure a chi debba costruire Wizard molto di frequente.
Di seguito un esempio di implementazione base in ASP/VBScript.
Codice esempio
Il Wizard seguente č costituito da due pagine (Wizard1.asp, Wizard2.asp) che mostrano due campi ciascuna, per un totale di quattro campi (rispettivamente: Campo11, Capo12, Campo21, Capo22), pių una pagina per l'esito finale dell'operazione (WizardEnd.asp).
In questo esempio, nella pagina finale č riportato il riepilogo dei dati inseriti. In un caso reale, la pagina finale dovrebbe provvedere a effettuare tutte le operazioni di registrazione e di notifica necessarie.
Wizard1.asp
<html>
<head>
<title>Wizard - 1/2</title>
<script language="javascript">
function doNext() {
var F = document.forms[0];
F.action = "Wizard2.asp";
F.submit();
}
</script>
</head>
<body>
<%
Dim Campo11 : Campo11 = Request("Campo11")
Dim Campo12 : Campo12 = Request("Campo12")
Dim Campo21 : Campo21 = Request("Campo21")
Dim Campo22 : Campo22 = Request("Campo22")
%>
<form method="post">
<input type="hidden" name="Campo21" value="<%=Campo21%>" ID="Hidden1">
<input type="hidden" name="Campo22" value="<%=Campo22%>" ID="Hidden2">
<h3>Wizard - 1/2</h3>
Campo11: <input type="text" name="Campo11" value="<%=Campo11%>" ID="Text1"><br>
Campo12: <input type="text" name="Campo12" value="<%=Campo12%>" ID="Text2"><br>
<br>
<input type="button" value="Prev" onclick="" ID="Button1" NAME="Button1" disabled>
<input type="button" value="Next" onclick="doNext()" ID="Button2" NAME="Button2">
</form>
</body>
</html>
Wizard2.asp
<html>
<head>
<title>Wizard - 2/2</title>
<script language="javascript">
function doPrev() {
var F = document.forms[0];
F.action = "Wizard1.asp";
F.submit();
}
function doFinish() {
var F = document.forms[0];
F.action = "WizardEnd.asp";
F.submit();
}
</script>
</head>
<body>
<%
Dim Campo11 : Campo11 = Request("Campo11")
Dim Campo12 : Campo12 = Request("Campo12")
Dim Campo21 : Campo21 = Request("Campo21")
Dim Campo22 : Campo22 = Request("Campo22")
%>
<form method="post" ID="Form1">
<input type="hidden" name="Campo11" value="<%=Campo11%>" ID="Hidden1">
<input type="hidden" name="Campo12" value="<%=Campo12%>" ID="Hidden2">
<h3>Wizard - 2/2</h3>
Campo21: <input type="text" name="Campo21" value="<%=Campo21%>" ID="Text3"><br>
Campo22: <input type="text" name="Campo22" value="<%=Campo22%>" ID="Text4"><br>
<br>
<input type="button" value="Prev" onclick="doPrev()" ID="Button1" NAME="Button1">
<input type="button" value="Finish" onclick="doFinish()" ID="Button2" NAME="Button2">
</form>
</body>
</html>
WizardEnd.asp
<html>
<head>
<title>Wizard - End</title>
<script language="javascript">
function doRestart() {
window.location.href = "Wizard1.asp";
}
</script>
</head>
<body>
<%
Dim Campo11 : Campo11 = Request("Campo11")
Dim Campo12 : Campo12 = Request("Campo12")
Dim Campo21 : Campo21 = Request("Campo21")
Dim Campo22 : Campo22 = Request("Campo22")
%>
<form method="post" ID="Form1">
<h3>Wizard - End</h3>
Campo11: <%=Campo11%><br>
Campo12: <%=Campo12%><br>
Campo21: <%=Campo21%><br>
Campo22: <%=Campo22%><br>
<br>
<input type="button" value="Restart" onclick="doRestart()" ID="Button2" NAME="Button2">
</form>
</body>
Stampa 
